<template>
	<view class="softeem-news-list">
		<view class="title">
			<text class="title-text">软帝资讯</text>
		</view>
		<view class="loading-img" v-if="!isShowNews">
			<!-- 此处要注意的是src的路径，因为当前的组件要导入到pages下面，所以会采用跳出两层目录的形式-->
			<image mode="scaleToFill" src="../../static/loading-process.gif"></image>
		</view>
		<view v-if="isShowNews">
			<view class="softeem-news-item" v-for="(item,index) in newsList" :key="index" :data-article_id="item.article_id" @tap="getNewsDetail">
				<view class="news-img">
					<image :src="item.show_image" mode="widthFix"></image>
				</view>
				<view class="news-details">
					<view class="news-title">{{item.title}}</view>
					<view class="news-content">{{item.msg}}</view>
					<view class="news-time">
						<image src="../../static/clock.png" mode="aspectFill"></image>
						{{item.last_time}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import AppConfig from '../config/AppConfig.js';
	export default {
		name:"softeemNewsList",
		data(){
			return {
				newsList:[],
				isShowNews:false
			}
		},
		created(){
			uni.request({
				url:`${AppConfig.baseUrl}/Softeem_web/getSofteemNews`,
				success:(res)=>{
					if(res.data.status=="success"){
						this.newsList=res.data.data;
					}
					else{
						uni.showToast({
							title:'软帝新闻获取失败'
						});
					}
				},
				fail:function(err){
					console.log(err);
					uni.showToast({
						title:'服务器错误,新闻获取失败'
					});
				},
				complete:()=>{
					this.isShowNews=true;
				}
			})
		},
		methods:{
			getNewsDetail(event){
				var article_id=event.currentTarget.dataset.article_id;
				console.log(article_id);
				uni.navigateTo({
					url:`/pages/softeemNewsDetail/softeemNewsDetail?article_id=${article_id}`,
				});
			}
		},
	}
</script>

<style>
/*新闻列表*/
.softeem-news-list{
	background-color: white;
	box-sizing: border-box;
	padding: 10px 20px;
}
.softeem-news-list>.title{
	height: 70px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid rgb(239,239,239);
}
.title-text{
	display: inline-block;
	height: 100%;
	border-bottom: 1px solid red;
}
.loading-img{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.loading-img>image{
	width: 32px;
	height: 32px;
}
.softeem-news-item{
	display: flex;
	flex-direction: row;
	min-height: 150px;
	padding: 10px 0px;
}
.softeem-news-item+.softeem-news-item{
	border-top: 1px solid rgb(239,239,239);
}
.news-img{
	width: 200px;
}
.news-img>image{
	width: 100%;
	height: auto;
}
.news-details{
	flex: 1;
	display: flex;
	flex-direction: column;
	font-size: 24px;
	box-sizing: border-box;
	padding:  0px 10px;
}
.news-title{
	font-size: 28px;
}
.news-content{
	color: gray;
}
.news-time{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 10px 20px;
	color: lightgray;
	justify-content: flex-end;
}
.news-time>image{
	width: 30px;
	height: 30px;
}
</style>
